<template>

<div class="payment-menthod">

    <div class="content">

        <Row :gutter='20'>
            <Col span="12">
                 <div class="code">
                    <l-file-upload :disabled='disabled' :mods='mods' @success='success'  @deleteFile='deleteFile' ></l-file-upload>
                </div>
            </Col>
            <Col span="12">
                <div class="form">

                    <div class="pos-code">

                        <h4 class="title">
                            pos机代码
                        </h4> 

                        <div class="content">
                            <Input class='main-code' :readonly='disabled' v-model="posCode" size='small'></Input>
                            <span class='inline'> - </span>
                            <Input class='iden-code' :readonly='disabled' v-model="verificationCode" size='small'></Input>
                        </div>

                    </div>

                     <div class="pay-id">

                        <h4 class="title">
                            支付ID
                        </h4> 

                        <div>
                            <Input :readonly='disabled' v-model="data.payId" size='small'></Input>
                        </div>

                    </div>
                    

                </div>
            </Col>
        </Row>
        
    </div>
   
     
</div>

</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import fileUpload from '@/components/ivew_components/file_upload/index.vue'
import router from '@/router/index'
import {store} from '@/store/index'

let vue:any = new Vue()

@Component({
    components: {
        'l-file-upload': fileUpload
    }
})
export default class paymentMenthod extends Vue{
    name:string = 'payment-menthod'


    @Prop({
        default: false
    })
    disabled:boolean

    @Prop()
    data

    get posCode (){
        
        let code =  this.data.posCode ?  this.data.posCode.split('-')  : '';
        return code[0];
    }

    set posCode(data){
        this.data.posCode = `${data}-${this.verificationCode}`
    }

    get verificationCode(){
        let code =  this.data.posCode ?  this.data.posCode.split('-')  : '';
        return code[1];
    }
    
    set verificationCode(data){
        this.data.posCode = `${this.posCode}-${data}`
    }

    get mods (){

        let _vue = this;

        return [{
            title: '支付二维码',
            url: _vue.data.qrCodeUrl
        }]
    }
    

    success({index, modsCache, response, file, fileList}){
        let orderId = router.currentRoute.query.orderId; 
        let currentMod = modsCache[index];
        let fileNumber = 0;
        
        currentMod.url = response.result.url;

        this.data['qrCodeUrl'] = currentMod.url
    }

    error({index, modsCache, response, file, fileList}){
        vue.$Notic({
            title: '文件上传失败, 请重试'
        })
    }
    
    deleteFile ({index, modsCache}){
        let orderId = router.currentRoute.query.orderId; 
        let currentMod =  modsCache[index];

        store.dispatch('request', {
            url: 'delete/files/id',
            data: {
                orderId,
                url: currentMod.url,
                title: currentMod.ttile,
            }
        }).then(success =>{
            currentMod.url = '';
        })

    }
}

</script>

<style scoped lang='scss'>

.payment-menthod{

    .title{
        margin-bottom: _intervals();
        font-size: $font_md;    
    }

    .pos-code,
    .pay-id{
        .title{
            font-size: $font-small;
            font-weight: 600;
        }
    }

    .pos-code{
        
        margin-top: _intervals(3);

        .inline{
            display: inline-block;
            padding: 0 _rem(6px);
        }

        .content{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .main-code{
            flex: 0  _rem(200px);
        }

        .iden-code{
            flex: 0 7rem;
        }
        
    }


    .pay-id{
        margin-top: _intervals(2);
    }
}

</style>